<template>
  <div class="app-container">
    <!-- 风险评估 -->
    <!-- 主表查询和其他操作 -->
    <el-form :inline="true" class="demo-form-inline filter">
      <div>
        <el-form-item label="客户名称">
          <el-select v-model="listQuery.fsiteNo" disabled clearable filterable class="filter-item" placeholder="请选择客户名称">
            <el-option
              v-for="item in getListfsiteNo"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="预约日期">
          <el-date-picker
            v-model="alarmdate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"/>
        </el-form-item>

        <el-form-item label="单号">
          <el-input
            v-model="listQuery.fbillno"
            clearable
            class="filter-item"
            placeholder="请输入单号"
          />
        </el-form-item>
        <el-form-item label="预约人员">
          <div style="display:flex;align-items:center">
            <el-select v-model="listQuery.fuseuser" style="display: inline-block" clearable filterable class="filter-item" placeholder="请选择预约人员">
              <el-option
                v-for="item in getListfuseuser"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
            <i style="display: inline-block;width:20px;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialog('search')"/>
          </div>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="预约地点">
          <div style="display:flex;align-items:center">
            <el-select v-model="listQuery.fpointNo" style="display: inline-block;" clearable filterable class="filter-item" placeholder="请选择预约地点">
              <el-option
                v-for="item in getListfpointNo"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
            <i style="display: inline-block;width:20px;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialoglab('search')"/>
          </div>
        </el-form-item>
        <el-form-item>
        <!-- v-permission="['equipmentUse:useHead:read']" -->
        <el-button
          :style="{background:buttonColor.lookup,color:buttonColor.color}"
          round
          size="medium"
          class="filter-item"
          @click="handleFilter"
        >查找</el-button>
      </el-form-item>
      </div>
    </el-form>

    <!-- 主表查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      :header-cell-style="tableColor"
      stripe
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
    >
      <el-table-column :width="buttonColor.operationTwo" align="center" label="操作" class-name="small-padding">
        <template slot-scope="scope">
          <div class="operationButton">
            <div :style="{color:buttonColor.edit,cursor:'pointer'}" @click="handleUpdate(scope.row)">
              <img src="../../../public/images/edit.png" >
              评估
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        :index="indexMethod"
        align="center"
        label="序"
        type="index"
      />
      <el-table-column align="center" label="单号" prop="fbillno" width="150" />
      <el-table-column :formatter="formatfpointNo" align="center" label="预约地点" prop="fpointNo" />
      <el-table-column :formatter="formatfuseuser" align="center" label="预约人员" prop="fuseuser" />
      <el-table-column
        :formatter="datetimeFormat"
        width="100"
        align="center"
        label="预约日期"
        prop="fusedate"
      />
      <el-table-column
        :formatter="datetimeFormat"
        width="100"
        align="center"
        label="实验日期"
        prop="fplanusedate"
      />

      <el-table-column
        :formatter="timeFormat"
        align="center"
        label="开始时间"
        prop="fplanbegtime"
      />
      <el-table-column
        :formatter="timeFormat"
        align="center"
        label="结束时间"
        prop="fplanendtime"
      />
      <el-table-column align="center" label="人数" prop="fmancount" />
      <el-table-column align="center" label="报警次数" />
      <el-table-column align="center" label="预约状态" prop="fbillstate">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.fbillstate===1" effect="dark" type="success">{{ scope.row.fbillstate | siteTypeFilter }}</el-tag>
          <el-tag v-else-if="scope.row.fbillstate===2" effect="dark">{{ scope.row.fbillstate | siteTypeFilter }}</el-tag>
          <el-tag v-else-if="scope.row.fbillstate===3" effect="dark" type="danger">{{ scope.row.fbillstate | siteTypeFilter }}</el-tag>
          <el-tag v-else effect="dark" type="info">{{ scope.row.fbillstate | siteTypeFilter }}</el-tag>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
    <!-- 主表添加或修改对话框 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      width="auto"
      top="0vh"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="dataForm"
        status-icon
        label-position="left"
        label-width="auto"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="单号" prop="fbillno">
              <el-input :disabled="true" v-model="dataForm.fbillno" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预约日期" prop="fusedate">
              <el-date-picker :disabled="true" v-model="dataForm.fusedate" type="date" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="预约状态"
              prop="fbillstate"
            >
              <el-select
                :disabled="true"
                v-model="dataForm.fbillstate"
                clearable
                placeholder="请选择预约状态"
              >
                <el-option
                  v-for="item in fbillstateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="客户名称" prop="fsiteNo">
              <el-select :disabled="true" v-model="dataForm.fsiteNo" clearable filterable class="filter-item" placeholder="请选择客户名称">
                <el-option
                  v-for="item in getListfsiteNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预约地点" prop="fpointNo">
              <el-select v-model="dataForm.fpointNo" disabled clearable filterable class="filter-item" placeholder="请选择预约地点">
                <el-option
                  v-for="item in getListfpointNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预约人员" prop="fuseuser">
              <el-select v-model="dataForm.fuseuser" disabled clearable filterable class="filter-item" placeholder="请选择预约人员">
                <el-option
                  v-for="item in getListfuseuser"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item
              label="实验日期"
              prop="fplanusedate"
              style="width: 320px"
            >
              <el-date-picker :disabled="true" v-model="dataForm.fplanusedate" type="date" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="开始时间"
              prop="fplanbegtime"
            >
              <el-time-picker
                :disabled="true"
                v-model="dataForm.fplanbegtime"
                placeholder="开始时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="结束时间"
              prop="fplanendtime"
            >
              <el-time-picker
                :disabled="true"
                v-model="dataForm.fplanendtime"
                placeholder="结束时间"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="16">
            <el-form-item
              label="实验说明"
              prop="fexplanation"
            >
              <el-input :disabled="true" v-model="dataForm.fexplanation" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="总人数" prop="fmancount">
              <el-input :disabled="true" v-model.number="dataForm.fmancount" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item
              label="确认时间"
              prop="fcheckdate"
            >
              <el-date-picker :disabled="true" v-model="dataForm.fcheckdate" type="date" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="确认员" prop="fcheckuser">
              <el-input :disabled="true" v-model="dataForm.fcheckuser" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="超时时间">
              <el-date-picker :disabled="true" type="date" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-tabs type="border-card">
        <el-tab-pane label="设备列表">
          <div class="app-container">
            <!-- 子表查询结果 -->
            <el-table
              v-loading="listLoading"
              :data="dataForm.details"
              :header-cell-style="tableColor"
              stripe
              element-loading-text="正在查询中。。。"
              border
              fit
              highlight-current-row
              height="20vh"
            >
              <el-table-column
                :index="indexMethod"
                align="center"
                label="序"
                type="index"
              />
              <el-table-column align="center" label="固定资产码" prop="fequipmentbarcode" />
              <el-table-column align="center" label="设备标签" prop="fequipmenttag" />
              <el-table-column :formatter="formatfaction" align="center" label="控制指令" prop="faction" />
              <el-table-column align="center" label="监控属性" >
                <template slot-scope="scope">
                  <el-button
                    :style="{background:buttonColor.see,color:buttonColor.color}"
                    round
                    size="small"
                    class="button-margin"
                    @click="monitoringDialog(scope.row)"
                  >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
        </div> </el-tab-pane>

        <el-tab-pane label="报警信息">
          <div class="app-container">
            <!-- 子表查询结果 -->
            <el-table
              v-loading="listLoading"
              :data="dataForm.details2"
              :header-cell-style="tableColor"
              stripe
              element-loading-text="正在查询中。。。"
              border
              fit
              highlight-current-row
              height="20vh"
            >
              <el-table-column
                :index="indexMethod"
                align="center"
                label="序"
                type="index"
              />
              <el-table-column
                align="center"
                label="设备名称"
                prop="fdictname"
              />
              <el-table-column :formatter="formatflevelno" align="center" label="报警时间" prop="fdictno" />
              <el-table-column align="center" label="当前值" prop="faction" />
              <el-table-column align="center" label="报警说明" prop="fPolicetime" />
              <el-table-column align="center" label="报警级别" prop="fPoliceReport" />
            </el-table>
        </div> </el-tab-pane>
        <el-tab-pane label="风险评估">
          <el-input
            :rows="7"
            v-model="dataForm.details3"
            type="textarea"
            placeholder="请输入评估内容"
          />
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="cancel()">取消</el-button>
        <el-button :style="{background:buttonColor.confirm,color:buttonColor.color}" @click="updateData">确定</el-button>
      </div>
    </el-dialog>

    <!-- 预约地点搜索弹出框 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="searchVisiblelab"
      top="5vh"
      title="搜索"
    >
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="预约地点">
          <el-input
            v-model="listQuerySearchlab.fpointName"
            clearable
            class="filter-item"
            style="width: 150px"
            placeholder="请输入预约地点"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            :style="{background:buttonColor.lookup,color:buttonColor.color}"
            round
            size="medium"
            class="filter-item"
            icon="el-icon-search"
            @click="searchFilterlab"
          >查找</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 查询结果 -->
      <el-table
        v-loading="listLoadingSearchlab"
        :data="searchListlab"
        :header-cell-style="tableColor"
        stripe
        element-loading-text="正在查询中。。。"
        border
        fit
        highlight-current-row
        height="300"
      >
        <el-table-column align="center" label="预约地点" prop="fpointName" />
        <el-table-column
          align="center"
          label="选择"
          class-name="small-padding"
        >
          <template slot-scope="scope">
            <el-button
              :style="{background:buttonColor.confirm,color:buttonColor.color}"
              round
              size="small"
              class="button-margin"
              @click="searchDatalab(scope.row)"
            >确定</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="totalSearchlab > 0"
        :total="totalSearchlab"
        :page.sync="listQuerySearchlab.page"
        :limit.sync="listQuerySearchlab.limit"
        style="padding:14px 10px !important"
        @pagination="getSearchListlab"
      />
    </el-dialog>

    <!-- 人员搜索弹出框 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="searchVisible"
      top="5vh"
      title="搜索"
    >
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="人员">
          <el-input
            v-model="listQuerySearch.username"
            clearable
            class="filter-item"
            style="width: 150px"
            placeholder="请输入人员"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            :style="{background:buttonColor.lookup,color:buttonColor.color}"
            round
            size="medium"
            class="filter-item"
            icon="el-icon-search"
            @click="searchFilter"
          >查找</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 查询结果 -->
      <el-table
        v-loading="listLoadingSearch"
        :data="searchList"
        :header-cell-style="tableColor"
        stripe
        element-loading-text="正在查询中。。。"
        border
        fit
        highlight-current-row
        height="300"
      >
        <el-table-column align="center" label="账号" prop="id" />
        <el-table-column align="center" label="人员" prop="username" />
        <el-table-column
          align="center"
          label="选择"
          class-name="small-padding"
        >
          <template slot-scope="scope">
            <el-button
              :style="{background:buttonColor.confirm,color:buttonColor.color}"
              round
              size="small"
              class="button-margin"
              @click="searchData(scope.row)"
            >确定</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="totalSearch > 0"
        :total="totalSearch"
        :page.sync="listQuerySearch.page"
        :limit.sync="listQuerySearch.limit"
        style="padding:14px 10px !important"
        @pagination="getSearchList"
      />
    </el-dialog>

    <!-- 数据监控 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="monitoringVisible"
      top="2vh"
      title="实时数据"
    >

      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="固定资产码">
          <el-input
            v-model="equipmentdata.fequipmentbarcode"
            disabled
            clearable
            class="filter-item"
            style="width: 160px"
            placeholder="请输入固定资产码"
          />
        </el-form-item>
        <el-form-item label="设备标签">
          <el-input
            v-model="equipmentdata.fequipmenttag"
            disabled
            clearable
            class="filter-item"
            style="width: 150px"
            placeholder="请输入设备标签"
          />
        </el-form-item>
      </el-form>

      <!-- 查询结果 -->
      <el-table
        v-loading="monitoringLoading"
        :data="monitoringList"
        :header-cell-style="tableColor"
        stripe
        element-loading-text="正在查询中。。。"
        border
        fit
        highlight-current-row
        height="300"
      >
        <el-table-column align="center" label="时间" prop="time" />
        <el-table-column align="center" label="面风速" prop="speed" />
        <el-table-column align="center" label="门高" prop="height" />
        <el-table-column align="center" label="排风阀角度" prop="angle" />
        <el-table-column align="center" label="温度" prop="temperature" />
        <el-table-column align="center" label="补风量" prop="fill" />
        <el-table-column align="center" label="排风量" prop="exhaust" />
      </el-table>
      <div :style="{width:'100%',height:'300px',overflowY:'auto',overflowX:'hidden',marginTop:'15px',borderTop:'3px solid #409EFF'}">
        <div id="myChartSpeed" :style="{width: '100%', height: '250px',backgroundColor:'#fff',marginTop:'15px'}"/>
        <div id="myChartHeight" :style="{width: '100%', height: '250px',backgroundColor:'#fff',marginTop:'30px'}"/>
        <div id="myChartAngle" :style="{width: '100%', height: '250px',backgroundColor:'#fff',marginTop:'30px'}"/>
        <div id="myChartTemperature" :style="{width: '100%', height: '250px',backgroundColor:'#fff',marginTop:'30px'}"/>
        <div id="myChartFill" :style="{width: '100%', height: '250px',backgroundColor:'#fff',marginTop:'30px'}"/>
        <div id="myChartExhaust" :style="{width: '100%', height: '250px',backgroundColor:'#fff',marginTop:'30px'}"/>
      </div>

      <pagination
        v-show="totalmonitoring > 0"
        :total="totalmonitoring"
        :page.sync="listQuerymonitoring.page"
        :limit.sync="listQuerymonitoring.limit"
        style="padding:14px 10px !important"
        @pagination="getMonitoringList"
      />
    </el-dialog>
  </div>
</template>

<style>
.button-margin {
  margin: 2px 0px;
}
.el-button + .el-button {
  margin-left: 1px;
}
</style>

<script>
import {
  listuseHead,
  createuseHead,
  updateuseHead
} from '@/api/useHead'
import { getListArea, fsiteOptionsByLevel } from '@/api/area'
import Pagination from '@/components/Pagination'
import moment from 'moment'
import { tableColor, buttonColor } from '@/filters/index'
import { listRoom } from '@/api/room'
import { listAdmin } from '@/api/admin'

const siteTypeMap = {
  1: '预约中',
  2: '已批准',
  3: '不核准',
  8: '已取消'
}

export default {
  name: 'STcAssessment',
  components: { Pagination },
  filters: {
    siteTypeFilter(type) {
      return siteTypeMap[type]
    }
  },
  data() {
    return {

      monitoringLoading: true,
      monitoringVisible: false,
      monitoringList: [],
      totalmonitoring: 0,
      listQuerymonitoring: {
        page: 1,
        limit: 20,
        sort: 'create_time',
        order: 'desc'
      },
      equipmentdata: {
        fequipmentbarcode: undefined,
        fequipmenttag: undefined
      },

      selectListlab: [],
      searchVisiblelab: false,
      searchListlab: null,
      listLoadingSearchlab: true,
      totalSearchlab: 0,
      listQuerySearchlab: {
        page: 1,
        limit: 20,
        fpointName: undefined,
        sort: 'create_time',
        order: 'desc'
      },

      searchFlag: '',
      searchFlaglab: '',

      selectList: [],
      searchVisible: false,
      searchList: null,
      listLoadingSearch: true,
      totalSearch: 0,
      listQuerySearch: {
        page: 1,
        limit: 20,
        username: undefined,
        sort: 'create_time',
        order: 'desc'
      },

      getListfsiteNo: null,
      getListfdictno: null,
      getListfactionAll: [],
      getListfuseuser: null,
      getListfpointNo: null,
      list: null,
      total: 0,
      listLoading: true,
      alarmdate: null,
      listQuery: {
        page: 1,
        limit: 20,
        fsiteNo: undefined,
        fuseuser: undefined,
        fusedate: undefined,
        ftakedateStart: undefined,
        ftakedateEnd: undefined,
        fplanusedate: undefined,
        fpointNo: undefined,
        fmancount: undefined,
        fplanbegtime: undefined,
        fplanendtime: undefined,
        frealbegtime: undefined,
        frealendtime: undefined,
        fexplanation: undefined,
        faudituser: undefined,
        fauditdate: undefined,
        fauditnote: undefined,
        fupddate: undefined,
        foperator: undefined,
        fcheckdate: undefined,
        fcheckuser: undefined,
        fbillstate: undefined,
        sort: 'create_time',
        order: 'desc'
      },
      dataForm: {
        fsiteNo: undefined,
        fuseuser: undefined,
        fusedate: undefined,
        fplanusedate: undefined,
        fpointNo: undefined,
        fmancount: undefined,
        fplanbegtime: undefined,
        fplanendtime: undefined,
        frealbegtime: undefined,
        frealendtime: undefined,
        fexplanation: undefined,
        faudituser: undefined,
        fauditdate: undefined,
        fauditnote: undefined,
        fupddate: undefined,
        foperator: undefined,
        fcheckdate: undefined,
        fcheckuser: undefined,
        fbillstate: undefined,
        id: undefined,
        details: [],
        details2: [],
        details3: []
      },
      actionsTmp3: undefined,
      actionsTmp: [],
      dialogFormVisible1: false,
      dialogStatus1: '',
      dataForm1: {},

      actionsTmp2: [],
      dialogFormVisible2: false,
      dialogStatus2: '',
      dataForm2: {},

      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '创建'
      },
      tableColor: tableColor,
      buttonColor: buttonColor,
      rules: {
        fsiteNo: [{ required: true, message: '客户名称不能为空' }],
        fuseuser: [{ required: true, message: '预约人员不能为空' }],
        fusedate: [{ required: true, message: '预约日期不能为空' }],
        fplanusedate: [],
        fpointNo: [{ required: true, message: '教室编号不能为空' }],
        fmancount: [
          {
            type: 'number',
            message: '人数必须为数字值',
            transform: (value) => Number(value)
          }
        ],
        fplanbegtime: [],
        fplanendtime: [],
        frealbegtime: [],
        frealendtime: [],
        fexplanation: [],
        faudituser: [],
        fauditdate: [],
        fauditnote: [],
        fupddate: [],
        foperator: [],
        fcheckdate: [],
        fcheckuser: [],
        fbillstate: [
          {
            type: 'number',
            message: '单据状态必须为数字值',
            transform: (value) => Number(value)
          }
        ]
      },
      rules1: {
        fdictname: [{ required: true, message: '设备名称不能为空' }],
        fdictno: [
          { required: true, message: '设备类型编号不能为空' },
          {
            type: 'number',
            message: '设备类型编号必须为数字值',
            transform: (value) => Number(value)
          }
        ],
        faction: [{ required: true, message: '控制指令不能为空' }]
      },
      fbillstateOptions: [
        { value: 1, label: '预约中' },
        { value: 2, label: '已批准' },
        { value: 3, label: '不核准' },
        { value: 8, label: '已取消' }
      ]
    }
  },
  created() {
    this.listQuery.fsiteNo = this.$store.state.user.fsiteNo
    this.alarmdate = [this.parserDate(moment(new Date().setDate(1)).format('YYYY-MM-DD')), new Date()]
    this.getList()
    // 用户名称
    fsiteOptionsByLevel(3)
      .then(response => {
        this.getListfsiteNo = response.data.data.list
      })
      .catch(() => {
        this.getListfsiteNo = []
      })
    getListArea({ flag: 1 })
      .then(response => {
        this.getListfdictno = response.data.data.list
      })
      .catch(() => {
        this.getListfdictno = []
      })
    // 预约地点
    this.getSearchListlab()
    getListArea({ flag: 10, arg1: this.$store.state.user.fsiteNo })
      .then(response => {
        this.getListfpointNo = response.data.data.list
      })
      .catch(() => {
        this.getListfpointNo = []
      })

      // 人员弹出框
    this.getSearchList()
    getListArea({ flag: 13, arg1: this.$store.state.user.fsiteNo })
      .then(response => {
        this.getListfuseuser = response.data.data.list
      })
      .catch(() => {
        this.getListfuseuser = []
      })

      // 获取全部控制指令
    getListArea({ flag: 25 })
      .then(response => {
        this.getListfactionAll = response.data.data.list
      })
      .catch(() => {
        this.getListfactionAll = []
      })
  },
  methods: {
    parserDate(date) {
      var t = Date.parse(date)
      if (!isNaN(t)) {
        return new Date(Date.parse(date.replace(/-/g, '/')))
      }
    },
    getMonitoringList() {
      this.monitoringLoading = true
      this.monitoringList = [
        { time: '8:00', speed: '38', height: '10', angle: '105', temperature: '60', fill: '215', exhaust: '6' },
        { time: '9:00', speed: '42', height: '48', angle: '42', temperature: '128', fill: '70', exhaust: '78' },
        { time: '10:00', speed: '30', height: '10', angle: '45', temperature: '60', fill: '55', exhaust: '288' },
        { time: '11:00', speed: '45', height: '6', angle: '54', temperature: '92', fill: '245', exhaust: '198' },
        { time: '12:00', speed: '43', height: '86', angle: '129', temperature: '16', fill: '130', exhaust: '240' },
        { time: '13:00', speed: '14', height: '46', angle: '138', temperature: '120', fill: '10', exhaust: '24' },
        { time: '14:00', speed: '49', height: '66', angle: '57', temperature: '140', fill: '190', exhaust: '42' },
        { time: '15:00', speed: '23', height: '92', angle: '126', temperature: '80', fill: '105', exhaust: '36' }
      ]
      this.totalmonitoring = 1
      this.monitoringLoading = false
    },

    drawLine() {
      // 面风速
      const myChart = this.$echarts.init(document.getElementById('myChartSpeed'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '面风速',
          left: 'center',
          textStyle: {
            fontSize: 24
          }
        },
        color: ['#4472C5'],
        grid: {
          left: '10%',
          right: '10%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['8', '9', '10', '11', '12', '13', '14', '15'],
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16 // 更改坐标轴文字大小
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16 // 更改坐标轴文字大小
            }
          }
        },
        series: {
          name: '面风速',
          type: 'line',
          data: ['38', '42', '30', '45', '43', '14', '49', '23'],
          itemStyle: { normal: { label: { show: true }}},
          lineStyle: {
            normal: {
              width: 4
            }
          }
        },
        tooltip: {
          trigger: 'axis'
        }
      })

      // 门高
      const myChartHeight = this.$echarts.init(document.getElementById('myChartHeight'))
      // 绘制图表
      myChartHeight.setOption({
        title: {
          text: '门高',
          left: 'center',
          textStyle: {
            fontSize: 24
          }
        },
        color: ['#ED7C30'],
        grid: {
          left: '10%',
          right: '10%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['8', '9', '10', '11', '12', '13', '14', '15'],
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16 // 更改坐标轴文字大小
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16 // 更改坐标轴文字大小
            }
          }
        },
        series: {
          name: '门高',
          type: 'line',
          data: ['10', '48', '10', '6', '86', '46', '66', '92'],
          itemStyle: { normal: { label: { show: true }}},
          lineStyle: {
            normal: {
              width: 4
            }
          }
        },
        tooltip: {
          trigger: 'axis'
        }
      })

      // 排风阀角度
      const myChartAngle = this.$echarts.init(document.getElementById('myChartAngle'))
      // 绘制图表
      myChartAngle.setOption({
        title: {
          text: '排风阀角度',
          left: 'center',
          textStyle: {
            fontSize: 24
          }
        },
        color: ['#80FF80'],
        grid: {
          left: '10%',
          right: '10%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['8', '9', '10', '11', '12', '13', '14', '15'],
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16 // 更改坐标轴文字大小
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16 // 更改坐标轴文字大小
            }
          }
        },
        series: {
          name: '排风阀角度',
          type: 'line',
          data: ['105', '42', '45', '54', '129', '138', '57', '126'],
          itemStyle: { normal: { label: { show: true }}},
          lineStyle: {
            normal: {
              width: 4
            }
          }
        },
        tooltip: {
          trigger: 'axis'
        }
      })

      // 温度
      const myChartTemperature = this.$echarts.init(document.getElementById('myChartTemperature'))
      // 绘制图表
      myChartTemperature.setOption({
        title: {
          text: '温度',
          left: 'center',
          textStyle: {
            fontSize: 24
          }
        },
        color: ['#FF8096'],
        grid: {
          left: '10%',
          right: '10%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['8', '9', '10', '11', '12', '13', '14', '15'],
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16 // 更改坐标轴文字大小
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16 // 更改坐标轴文字大小
            }
          }
        },
        series: {
          name: '温度',
          type: 'line',
          data: ['60', '128', '60', '92', '16', '120', '140', '80'],
          itemStyle: { normal: { label: { show: true }}},
          lineStyle: {
            normal: {
              width: 4
            }
          }
        },
        tooltip: {
          trigger: 'axis'
        }
      })

      // 补风量
      const myChartFill = this.$echarts.init(document.getElementById('myChartFill'))
      // 绘制图表
      myChartFill.setOption({
        title: {
          text: '补风量',
          left: 'center',
          textStyle: {
            fontSize: 24
          }
        },
        color: ['#73c0de'],
        grid: {
          left: '10%',
          right: '10%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['8', '9', '10', '11', '12', '13', '14', '15'],
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16 // 更改坐标轴文字大小
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16 // 更改坐标轴文字大小
            }
          }
        },
        series: {
          name: '补风量',
          type: 'line',
          data: ['215', '70', '55', '245', '130', '10', '190', '105'],
          itemStyle: { normal: { label: { show: true }}},
          lineStyle: {
            normal: {
              width: 4
            }
          }
        },
        tooltip: {
          trigger: 'axis'
        }
      })

      // 排风量
      const myChartExhaust = this.$echarts.init(document.getElementById('myChartExhaust'))
      // 绘制图表
      myChartExhaust.setOption({
        title: {
          text: '排风量',
          left: 'center',
          textStyle: {
            fontSize: 24
          }
        },
        color: ['#fac858'],
        grid: {
          left: '10%',
          right: '10%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['8', '9', '10', '11', '12', '13', '14', '15'],
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16 // 更改坐标轴文字大小
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16 // 更改坐标轴文字大小
            }
          }
        },
        series: {
          name: '排风量',
          type: 'line',
          data: ['6', '78', '288', '198', '240', '24', '42', '36'],
          itemStyle: { normal: { label: { show: true }}},
          lineStyle: {
            normal: {
              width: 4
            }
          }
        },
        tooltip: {
          trigger: 'axis'
        }
      })
    },

    // 人员弹出框
    getSearchList() {
      this.listLoadingSearch = true
      const templ = {
        fsiteNoBelong: this.$store.state.user.fsiteNo,
        page: this.listQuerySearch.page,
        limit: this.listQuerySearch.limit,
        sort: 'create_time',
        order: 'desc',
        username: this.listQuerySearch.username
      }
      listAdmin(templ)
        .then(response => {
          this.searchList = response.data.data.list
          this.totalSearch = response.data.data.total
          this.listLoadingSearch = false
        })
        .catch(() => {
          this.searchList = []
          this.totalSearch = 0
          this.listLoadingSearch = false
        })
    },

    // 人员弹出框
    searchFilter() {
      this.listQuerySearch.page = 1
      this.getSearchList()
    },

    // 人员弹出框
    searchData(row) {
      this.searchVisible = false
      if (this.searchFlag === 'add') {
        this.dataForm.fuseuser = row.id.toString()
      } else {
        this.listQuery.fuseuser = row.id.toString()
      }
    },

    // 人员弹出框
    searchDialog(data) {
      if (data === 'add') {
        this.searchFlag = 'add'
      } else {
        this.searchFlag = 'search'
      }
      this.searchVisible = true
    },

    // 预约地点获取搜索列表
    getSearchListlab() {
      this.listLoadingSearchlab = true
      const temp = {
        fsiteNo: this.$store.state.user.fsiteNo,
        fpointFlag: 0,
        page: this.listQuerySearchlab.page,
        limit: this.listQuerySearchlab.limit,
        sort: 'create_time',
        order: 'desc',
        fpointName: this.listQuerySearchlab.fpointName
      }

      listRoom(temp)
        .then(response => {
          this.searchListlab = response.data.data.list
          this.totalSearchlab = response.data.data.total
          this.listLoadingSearchlab = false
        })
        .catch(() => {
          this.searchListlab = []
          this.totalSearchlab = 0
          this.listLoadingSearchlab = false
        })
    },

    // 预约地点获取搜索列表
    searchFilterlab() {
      this.listQuerySearchlab.page = 1
      this.getSearchListlab()
    },
    // 预约地点获取搜索列表
    searchDatalab(row) {
      this.searchVisiblelab = false
      if (this.searchFlaglab === 'add') {
        this.dataForm.fpointNo = row.fpointNo
      } else {
        this.listQuery.fpointNo = row.fpointNo
      }
    },

    // 预约地点获取搜索列表
    searchDialoglab(data) {
      if (data === 'add') {
        this.searchFlaglab = 'add'
      } else {
        this.searchFlaglab = 'search'
      }
      this.searchVisiblelab = true
    },
    formatfsiteNo: function(row, column) {
      if (this.getListfsiteNo) {
        for (let i = 0; i < this.getListfsiteNo.length; i++) {
          if (row.fsiteNo === this.getListfsiteNo[i].value) {
            return this.getListfsiteNo[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },
    formatflevelno: function(row, column) {
      if (this.getListfdictno) {
        for (let i = 0; i < this.getListfdictno.length; i++) {
          if (row.fdictno === this.getListfdictno[i].value) {
            return this.getListfdictno[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },
    formatfpointNo: function(row, column) {
      if (this.getListfpointNo) {
        for (let i = 0; i < this.getListfpointNo.length; i++) {
          if (row.fpointNo === this.getListfpointNo[i].value) {
            return this.getListfpointNo[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },
    formatfuseuser: function(row, column) {
      if (this.getListfuseuser) {
        for (let i = 0; i < this.getListfuseuser.length; i++) {
          if (row.fuseuser === this.getListfuseuser[i].value) {
            return this.getListfuseuser[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },

    // 控制指令
    formatfaction: function(row, column) {
      if (this.getListfactionAll) {
        for (let i = 0; i < this.getListfactionAll.length; i++) {
          if (row.faction == this.getListfactionAll[i].value) {
            return this.getListfactionAll[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },

    datetimeFormat(row, column) {
      const date = row[column.property]
      if (date === undefined || date === null) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD')
    },
    timeFormat(row, column) {
      const date = row[column.property]
      if (date === undefined || date === null) {
        return ''
      }
      return moment(date).format('HH:mm:ss')
    },
    formatDate: function(date) {
      if (typeof (date) === 'object') {
        var ym
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        ym = '' + y + m + d
        return ym
      } else {
        return date
      }
    },
    getList() {
      this.listQuery.ftakedateStart = this.alarmdate == null ? null : this.formatDate(this.alarmdate[0])
      this.listQuery.ftakedateEnd = this.alarmdate == null ? null : this.formatDate(this.alarmdate[1])
      this.listLoading = true
      listuseHead(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    resetForm() {
      this.dataForm = {
        fsiteNo: undefined,
        fuseuser: undefined,
        fusedate: undefined,
        fplanusedate: undefined,
        fpointNo: undefined,
        fmancount: undefined,
        fplanbegtime: undefined,
        fplanendtime: undefined,
        frealbegtime: undefined,
        frealendtime: undefined,
        fexplanation: undefined,
        faudituser: undefined,
        fauditdate: undefined,
        fauditnote: undefined,
        fupddate: undefined,
        foperator: undefined,
        fcheckdate: undefined,
        fcheckuser: undefined,
        fbillstate: undefined,
        id: undefined,
        details: [],
        details3: []
      }
    },

    monitoringDialog(row) {
      this.monitoringVisible = true
      this.getMonitoringList()
      this.equipmentdata.fequipmentbarcode = row.fequipmentbarcode
      this.equipmentdata.fequipmenttag = row.fequipmenttag
      setTimeout(() => {
        this.drawLine()
      }, 4)
    },
    handleCreate() {
      this.resetForm()
      this.dialogStatus = 'create'
      this.dataForm.fsiteNo = this.$store.state.user.fsiteNo
      this.dataForm.fbillno = '系统自动生成'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.dataForm.foperator = this.$store.state.user.id
          this.dataForm.fupddate = new Date()
          createuseHead(this.dataForm)
            .then((response) => {
              this.list.unshift(response.data.data)
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '添加设备预约主表成功'
              })
            })
            .catch((response) => {
              this.$notify.error({
                title: '失败',
                message: response
              })
            })
        }
      })
    },
    handleUpdate(row) {
      this.actionsTmp = []
      row.details.forEach((v) => {
        this.actionsTmp.push(v)
      })
      this.actionsTmp3 = row.details3

      this.dataForm = Object.assign({}, row)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.dataForm.foperator = this.$store.state.user.id
          this.dataForm.fupddate = new Date()
          updateuseHead(this.dataForm, this.$route.query.id)
            .then(() => {
              for (const v of this.list) {
                if (v.fbillno === this.dataForm.fbillno) {
                  const index = this.list.indexOf(v)
                  this.list.splice(index, 1, this.dataForm)
                  break
                }
              }
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '更新设备预约主表成功'
              })
            })
            .catch((response) => {
              this.$notify.error({
                title: '失败',
                message: response
              })
            })
        }
      })
    },
    indexMethod(index) {
      index = index + 1
      return index
    },

    handleUpdate1() {
      this.dataForm1 = {}
      this.dialogStatus1 = 'create'
      this.dialogFormVisible1 = true
      this.$nextTick(() => {
        this.$refs['dataForm1'].clearValidate()
      })
    },

    handleDelete1(row) {
      const index = this.dataForm.details.indexOf(row)
      this.dataForm.details.splice(index, 1)
      // this.dataForm.details.pop(row)
    },
    addData() {
      this.$refs['dataForm1'].validate((valid) => {
        if (valid) {
          this.dialogFormVisible1 = false
          this.dataForm.details.push(this.dataForm1)
        }
      })
    },
    cancel() {
      this.dialogFormVisible = false
      this.list.forEach((v) => {
        if (v.fbillno === this.dataForm.fbillno) {
          this.dataForm.details = this.actionsTmp
          this.dataForm.details3 = this.actionsTmp3
          const index = this.list.indexOf(v)
          this.list.splice(index, 1, this.dataForm)
          return
        }
      })
    }
  }
}
</script>
